<template>
    <div class="new_detail_container">
        <Banner title='新闻详情' flag="new"></Banner>
        <div class="container new_detail" id="new_detail">
            <div class="row">
                <!-- 新闻详情   START -->
                <div class="col-md-8 left">
                    <h2 class="wow animate__animated animate__fadeIn" data-wow-duration="2s">{{
                        newDetailInfo.title }}</h2>
                    <img class="wow animate__animated animate__fadeIn" data-wow-duration="2s" :src="newDetailInfo.imgUrl"
                        alt="新闻详情" />
                    <div class="content_list wow animate__animated animate__fadeInUp" data-wow-duration="2s"
                        v-for="c in newDetailInfo.content" :key="c.contentId">
                        <h4>
                            {{ c.contentTitle }}
                        </h4>
                        <p>
                            {{ c.contentText }}
                        </p>
                    </div>
                    <span class="date wow animate__animated animate__fadeInUp" data-wow-duration="2s">{{
                        newDetailInfo.releaseDate }}</span>
                </div>
                <!-- 新闻详情   END -->

                <!-- 新闻推荐   START -->
                <transition name="newsRecommended" appear class="animate__animated"
                    enter-active-class="animate__fadeInRight">
                    <div class="col-md-4 right">
                        <div class="recommended" v-for="nr in recommendNewList" :key="nr.id"
                            @click="handleRecommend(nr.id)">
                            <img :src="nr.imgUrl" alt="公司新闻" />
                            <div class="textarea">
                                <h3 class="title">{{ nr.title }}</h3>
                                <p class="date">{{ nr.releaseDate }}</p>
                            </div>
                        </div>
                        <button class="back_list" @click="backNew">返回列表</button>
                    </div>
                </transition>
                <!-- 新闻推荐   END -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, computed, nextTick } from 'vue';
import useNewStore from '@/store/modules/new.ts';
import WOW from 'wow.js'// 在vue3中下载的是wow.js|vue2中是wowjs

const route = useRoute()
const router = useRouter()
const newStore = useNewStore()

let newDetailInfo = computed(() => newStore.newDetail)
let recommendNewList = computed(() => newStore.recommendNewsList)

onMounted(() => {
    getNewDetail(Number(route.query.id))
    getRecommendNews()

    //初始化wow.js(页面滚动加载动画)
    nextTick(() => {   //页面渲染完，在执行
        new WOW().init()
    })
})

// 点击推荐新闻
const handleRecommend = (id: number) => {
    getNewDetail(id)
    // 平滑移动至页面指定位置
    let goDetailTop = document.getElementById('new_detail')
    if (goDetailTop) {
        goDetailTop.scrollIntoView({
            behavior: 'smooth',//平滑滚动
            block: 'start' //将指定位置滚动到页面中间
        })
    }
}

// 返回新闻列表
const backNew = () => {
    router.push('/new')
}
// 获取新闻详情
const getNewDetail = async (id: number) => {
    await newStore.getNewDetail(id)
}
// 获取推荐新闻信息
const getRecommendNews = async () => {
    await newStore.getRecommendNews()
}
</script>

<style scoped lang="scss">
.new_detail {
    margin-top: 40px;
    margin-bottom: 100px;

    .left {
        padding: 20px 20px;

        h2 {
            font-family: "Source Han Sans CN";
            font-size: 30px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 10px;
            border-left: 5px solid #eee;
            padding-left: 20px;
        }

        img {
            width: 100%;
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .content_list {
            word-break: break-all;
            word-wrap: break-word;
            margin: 10px 0px 20px;

            h4 {
                font-family: "Source Han Sans CN";
                font-size: 15px;
                color: #555;
                font-weight: bold;
                line-height: 22px;
                text-align: justify;
                margin-bottom: 10px;
            }

            p {
                font-family: "Source Han Sans CN";
                font-size: 15px;
                color: #999999;
                line-height: 22px;
                text-align: justify;
            }
        }

        .date {
            background-color: #DCE1EE;
            padding: 4px 8px;
            display: inline-block;
            border-radius: 3px;
            color: #999999;
            font-size: 12px;
            font-weight: bold;
            margin-top: 10px;
        }
    }

    .right {
        margin-top: 50px;
        padding: 0 24px;

        .recommended {
            border-bottom: 1px solid #eeeeee;
            height: 100px;
            margin-top: 43px;
            user-select: none;
            cursor: pointer;
            transition: transform 0.2s linear;

            &:hover {
                box-shadow: 0px 1.2px 1.2px -4px rgba(0, 0, 0, 0.016),
                    0px 4px 4px -4px rgba(0, 0, 0, 0.024),
                    0px 18px 18px -4px rgba(0, 0, 0, 0.04);
                transform: translateY(-2px);
            }

            img {
                height: 80px;
                width: 80px;
            }

            .textarea {
                font-family: "Source Han Sans CN";
                margin-left: 100px;
                position: relative;
                top: -80px;
                height: 80px;

                .date {
                    position: absolute;
                    bottom: -16px;
                    right: 0px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #999999;
                    text-align: right;
                }

                .title {
                    font-size: 15px;
                    font-weight: 400;
                    line-height: 22px;
                    color: #999;
                    display: inline-block;
                    word-break: break-all;
                    /* 文本超出两行显示省略号 */
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    /* 这里是超出几行省略 */
                    overflow: hidden;
                }
            }
        }

        .back_list {
            background-color: #fff;
            font-family: "Source Han Sans CN";
            font-weight: 300;
            font-size: 16px;
            border: 1px solid #ccc;
            color: #999;
            width: 100%;
            height: 50px;
            margin: 30px 0px 0px;
            transition-duration: 0.3s;

            &:hover {
                background-color: #4F68AC;
                color: #fff;
                border: none;
            }

            &:active {
                transform: scale(0.95);
            }
        }
    }
}
</style>